<template>

	<!-- 触底加载的骨架屏 -->
	<!-- 当有数据的长度时候关闭页面加载 ,请求接口没有数据也关闭加载-->
	<view class="openLoading" v-if="!classList.length && !noData" >
		<uni-load-more status="loading"></uni-load-more>
	</view>
	<view class="classList">
		<navigator :url="'/pages/theme/theme?id=' + item._id" v-for="item in classList" :key="item._id" class="list">
			<image :src="item.smallPicurl" mode="aspectFill"></image>
		</navigator>
	</view>
	<view class="openLoading" v-if="classList.length || noData" >
		<uni-load-more :status="noData? 'no-more':'loading'"></uni-load-more>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onLoad,onReachBottom,onShareAppMessage,onUnload} from '@dcloudio/uni-app'
	const classList = ref([])
//noData = false 表示还有数据可以请求，触底时继续加载下一页。
//noData = true 表示已经没有更多数据了，不再发起请求。
	const noData = ref(false)
	const queryParams = {
		pageSize:12,
		pageNum:1
	}
	let pageName 
	//页面加载时e是接收classify传递过来的参数
	onLoad( (e)=>{
		let {id,name,type} = e
		if(type) queryParams.type = type
		if(id) queryParams.classid =id
		pageName = name
//动态设置当前页面的标题
uni.setNavigationBarTitle({
	title:name
})
//拿到参数id值后在请求接口数据调用
	getClasslist()
	})
	//触底操作
	onReachBottom( ()=>{
//数据接口有数据时候直接返回
if(noData.value) return;
queryParams.pageNum++
getClasslist()
	})
	const getClasslist = async ()=>{
		let res;
if(queryParams.classid){
 res = await uni.request({
		url:'https://tea.qingnian8.com/api/bizhi/wallList',
		header:{
			"access-key": "238762"
		},
		data: queryParams
	})
}
if(queryParams.type){ 
 res = await uni.request({
		url:"https://tea.qingnian8.com/api/bizhi/userWallList",
		header:{
			"access-key": "238762"
		},
		data: queryParams
	})
	console.log(res);
}
//触底刷新，页面页数加1，旧数据和新数据拼接，刷新直接展示，不用翻页
classList.value = [...classList.value ,...res.data.data ]
//接口的数据已经没有了，就停止请求接口，
if(queryParams.pageSize > res.data.data.length){
 	noData.value = true
 }
 //将数据放入本地缓存
 uni.setStorageSync('storagClasslist',classList.value)	
	}

//分享朋友和朋友圈
	onShareAppMessage(()=>{
		//分享朋友时候传递id和名称
	return{
		title:'小方图片~'+pageName,
		path:"/pages/classList/classList?id=" + queryParams.classid + "&name="+pageName
	}
	})
	// onShareTimeline( ()=>{
	// 	// 朋友圈分享传递参数用query
	//  return {
	//       title: '小方图片'+pageName,
	// 	  query:"id="+queryParams.classid + "name="+pageName
	//     }
	// })	
	onUnload( ()=>{
		uni.removeStorageSync('storagClasslist',classList.value)
	})

	

</script>

<style lang="scss">
	 .classList{
		 display: grid;
		 gap: 5rpx;
		 grid-template-columns: repeat(3,1fr);
		 padding: 5rpx;
		 image{
			 width: 100%;
			 height: 440rpx;
			 display: block;
		 }
	 }      
</style>
